<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="这是一个示例网页">
    <meta name="author" content="作者名">
    <meta http-equiv="refresh" content="30">
    <title>示例页面</title>
</head>
<body>

<h1>示例页面</h1>

<!-- 超链接、本地连接、图像链接、bookmark -->
<a href="https://www.baidu.com">超链接</a><br>
<a href="布局.html">本地连接</a><br>
<img src="./eg_bulboff.gif" alt="示例图像"><br>
<a href="#list2">Bookmark</a><br>
<a href="./eg_bulboff.gif" download>点击下载文件</a><br>
<video controls autoplay preload="auto" width="600">
  <source src="mp4.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频标签。
</video>
<!-- 列表 -->
<h1>列表</h1>
<h2 id="list1">有序列表</h2>
<ol start="2">
    <li>第二项</li>
    <li>第三项</li>
</ol>
<h2 id="list2">无序列表</h2>
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>
<h2 id="list3">多级列表</h2>
<ul>
  <li>第一项
      <ul>
          <li>第一项的子项1</li>
          <li>第一项的子项2</li>
      </ul>
  </li>
  <li>第二项
      <ul>
          <li>第二项的子项1</li>
          <li>第二项的子项2</li>
      </ul>
  </li>
</ul>
<h2 id="list4">可折叠列表</h2>
<details>
  <summary>第一项</summary>
  <ul>
      <li>第一项的子项1</li>
      <li>第一项的子项2</li>
  </ul>
</details>
<details>
  <summary>第二项</summary>
  <ul>
      <li>第二项的子项1</li>
      <li>第二项的子项2</li>
  </ul>
</details>
<!-- 表格 -->
<h1 id="label">表格</h1>
<table>
    <caption>成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>课程1</th>
        <th>课程2</th>
        <th>课程3</th>
        <th>课程4</th>
        <th>总平均分</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>123456</td>
        <td>85</td>
        <td>90</td>
        <td>88</td>
        <td>92</td>
        <td>88.75</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>123456</td>
      <td>85</td>
      <td>90</td>
      <td>88</td>
      <td>92</td>
      <td>88.75</td>
  </tr>
</table>

<!-- 表单 -->
<h1 id="form">表单</h1>
<form action="http://localhost:8000" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" placeholder="请输入姓名" autofocus><br>

  <label for="gender">性别:</label>
  <select id="gender" name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
  </select><br>

  <label for="student-id">学号:</label>
  <input type="number" id="student-id" name="student-id" placeholder="请输入学号" title="学号应为十位数字" oninput="if(this.value.length > 10) this.value = this.value.slice(0, 10);"><br>

  <label for="college">学院:</label>
  <select id="college" name="college">
    <optgroup label="睿信书院">
        <option value="computer">计算机学院</option>
        <option value="information">信息与电子学院</option>
    </optgroup>
    <optgroup label="精工书院">
        <option value="fly">宇航学院</option>
        <option value="car">车辆学院</option>
    </optgroup>
  </select><br>

  <label for="phone">手机号:</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入手机号" pattern="[0-9]{11}"><br>

  <label for="datetime">填写时间:</label>
  <input type="datetime-local" id="datetime" name="datetime"><br>

  <input type="submit" value="提交">
</form>

</body>
</html>
